<template>
  <div class="icon-select">
    <div class="icon-select-wrapper" :class="{ hasValue: iconData.value }" @click="open">
      <el-input v-model="iconData.value" :disabled="disabled" readonly>
        <template #prepend>
          <svg-icon v-if="iconData.value" class="txt-2em" :icon-class="iconData.value"></svg-icon>
          <span v-else class="txt-primary txt-0_8em txt-lighter"> 选择图标 </span>
        </template>
      </el-input>
    </div>
    <el-dialog title="图标选择器" v-model="iconData.dialogVisible" width="60%" destroy-on-close append-to-body>
      <div class="icon-select-dialog border-top-lightgray pt-1em" style="margin: -20px 0 -10px 0">
        <el-scrollbar max-height="400px">
          <div class="flex-container flex-row-left flex-wrap">
            <el-empty v-if="iconList.length === 0" :image-size="100" description="一个可用的图标都木得" />
            <div class="flex-container flex-row-center" v-for="icon in iconList" :key="icon">
              <div class="w-3em h-3em hand icon-content" @click="selectIcon(icon)">
                <svg-icon class="txt-2em" :icon-class="icon"></svg-icon>
              </div>
            </div>
          </div>
          <br />
        </el-scrollbar>
      </div>
      <template #footer>
        <el-button @click="clear" text>清除</el-button>
        <el-button @click="iconData.dialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'
import { onMounted, ref, watch } from 'vue'

onMounted(() => {
  const files = import.meta.glob('@/assets/icons/*.svg')
  iconList.value = Object.keys(files).map((file) => {
    return file.replaceAll('/src/assets/icons/', '').replaceAll('.svg', '')
  })
  iconData.value.value = props.modelValue
})

// 当前可以使用的icon图标，目前没找到自动获取的办法，先写死吧，到时候做一个专门管理图标的服务
const iconList = ref([])

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const iconData = ref({
  value: '',
  dialogVisible: false,
  data: [],
  searchText: '',
})

function open() {
  if (props.disabled) {
    return false
  }
  iconData.value.dialogVisible = true
}

const emits = defineEmits(['update:modelValue'])

function clear() {
  iconData.value.value = ''
  emits('update:modelValue', '')
  iconData.value.dialogVisible = false
}

function selectIcon(icon) {
  iconData.value.value = icon
  emits('update:modelValue', icon)
  iconData.value.dialogVisible = false
}
</script>

<style lang="scss" scoped>
.icon-select-wrapper {
  :deep(.el-input__inner) {
    flex-grow: 0;
    width: 0;
  }
  :deep(.el-input__wrapper) {
    flex-grow: 0;
    width: 0;
    display: none;
  }
  :deep(.el-input-group__prepend) {
    flex-grow: 0;
    width: 3em;
    box-shadow: none;
    border-radius: 4px;
    display: block;
    background-color: #fefefe;
    cursor: pointer;
  }
  :deep(.el-input__icon) {
    margin: 0;
    font-size: 16px;
  }
  .hasValue {
    :deep(.el-input__icon) {
      color: var(--el-text-color-regular);
    }
  }
}
.icon-content {
  padding-top: 6px;
  padding-left: 4px;
  &:hover {
    border-radius: 6px;
    border: var(--el-color-primary) solid 2px;
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
  }
}
</style>
